<template>
  <div class="address">
    <el-card>
      <div @click="handlerback" style="cursor: pointer;">
        <i class="el-icon-arrow-left"></i> 返回
      </div>
      <div class="address_select">
        选择收货地址
        <el-link type="primary" @click="handleraddressguanli"
          >管理收获地址</el-link
        >
      </div>
      <div class="address_list">
        <div
          :class="index == selectIndex ? 'active' : 'address_list_item'"
          v-for="(item, index) in addressList"
          :key="item.id"
          @click="handlerSelectAddress(item, index)"
        >
          <div class="address_list_item_top">
            {{ item.addressInfo }}({{ item.userName }})
          </div>
          <div class="address_list_item_center">
            {{ item.addressDetail }}
          </div>
          <div class="address_list_item_bottom">
            <span style="cursor: pointer;" @click="handlershowEdit(item)"
              >修改</span
            >
          </div>
        </div>
        <div class="address_list_add" @click="handlershowaddress">
          <i class="el-icon-plus" style="font-size:16px"></i>
          <div>创建新地址</div>
        </div>
      </div>
      <div class="address_order">
        <h4>确认订单详情</h4>
        <el-table :data="goodlist" style="width: 100%;margin-top:30px">
          <el-table-column prop="no" label="序号" width="180">
          </el-table-column>
          <el-table-column label="商品信息" width="480">
            <template slot-scope="scoped">
              <div class="product">
                <div class="product_left">
                  <img
                    :src="scoped.row.fitImg"
                    style="width;60px;height:60px"
                    alt=""
                  />
                </div>
                <div class="product_right">
                  <div>商品名称:{{ scoped.row.fitName }}</div>
                  <div>商品型号:{{ scoped.row.fitModelName }}</div>
                  <div>使用设备:{{ scoped.row.deviceModelName }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="fitPrice" label="商品价格(/元)" align="center">
          </el-table-column>
          <el-table-column prop="number" label="购买数量" align="center">
          </el-table-column>
          <el-table-column prop="subtotal" label="小计" align="center">
          </el-table-column>
        </el-table>
      </div>
      <div class="address_mark">
        备注:
        <el-input
          type="textarea"
          v-model="allform.remark"
          style="width:250px"
        ></el-input>
      </div>
      <div class="address_isopen">
        <el-checkbox-group v-model="openfa">
          <el-checkbox
            label="开具发票"
            name="type"
            @change="handleropen"
          ></el-checkbox>
        </el-checkbox-group>
      </div>

      <div v-if="showInvoice">
        <el-form ref="form" :model="allform" label-width="120px">
          <el-form-item label="发票样式">
            <el-radio-group
              v-model="invoiceStyle"
              @change="handlerinvoiceStyle"
            >
              <el-radio label="1">电子发票</el-radio>
              <el-radio label="2">纸质发票</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="抬头类型">
            <el-radio-group v-model="invoiceHead" @change="handlerinvoiceHead">
              <el-radio label="1">个人</el-radio>
              <el-radio label="2">企业</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 当用户选择（电子发票或者纸质发票）---（个人）  -->
          <div
            v-if="
              (invoiceStyle == 1 && invoiceHead == 1) ||
                (invoiceStyle == 2 && invoiceHead == 1)
            "
          >
            <el-form-item label="发票信息">
              明细
            </el-form-item>
            <el-form-item label="发票抬头">
              <el-input
                v-model="allform.vbrk"
                placeholder="请输入发票抬头"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="电子邮箱"
              v-if="
                (invoiceStyle == 1 && invoiceHead == 1) ||
                  (invoiceStyle == 1 && invoiceHead == 2)
              "
            >
              <el-input
                v-model="allform.setEmailBox"
                placeholder="请输入电子邮箱"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="收货地址"
              v-if="invoiceStyle == 2 && invoiceHead == 1"
            >
              <div
                class="address_list_two"
                :style="{ height: addressHeight + 'px' }"
              >
                <div
                  :class="
                    index == selectIndexTwo
                      ? 'active1'
                      : 'address_list_item_two'
                  "
                  v-for="(item, index) in addressList"
                  :key="item.id"
                  @click="handlerSelectAddressTwo(item, index)"
                >
                  <div class="address_list_item_top">
                    {{ item.addressInfo }}({{ item.userName }})
                  </div>
                  <div class="address_list_item_center">
                    {{ item.addressDetail }}
                  </div>
                </div>
              </div>
              <div class="address_list_two_bottom">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handlershowMore"
                  >展开更多收货地址</el-link
                >
                <el-link
                  type="primary"
                  style="margin-right:40px"
                  :underline="false"
                  @click="handleraddressguanli"
                  >管理收货地址</el-link
                >
              </div>
            </el-form-item>
          </div>
          <!-- 当用户选择（电子发票）---（企业）  -->
          <div
            v-if="
              (invoiceStyle == 2 && invoiceHead == 2) ||
                (invoiceStyle == 1 && invoiceHead == 2)
            "
          >
            <el-form-item label="发票类型">
              <el-radio-group
                v-model="invoiceType"
                @change="hadnlerinvoiceType"
              >
                <el-radio label="1">普票</el-radio>
                <el-radio label="2">专票</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="发票信息">
              明细
            </el-form-item>
            <el-form-item label="发票抬头">
              <el-input
                v-model="allform.vbrk"
                placeholder="请输入发票抬头"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item label="纳税人识别号">
              <el-input
                v-model="allform.taxpayerCode"
                placeholder="请输入纳税人识别号"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item label="开户银行">
              <el-input
                v-model="allform.bank"
                placeholder="请输入开户银行(选填)"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item label="银行账号">
              <el-input
                v-model="allform.bankAccount"
                placeholder="请输入银行账号(选填)"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item label="企业地址">
              <el-input
                v-model="allform.businessAddress"
                placeholder="请输入企业地址(选填)"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item label="企业电话">
              <el-input
                v-model="allform.businessPhone"
                placeholder="请输入企业电话(选填)"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="电子邮箱"
              v-if="
                (invoiceStyle == 1 && invoiceHead == 1) ||
                  (invoiceStyle == 1 && invoiceHead == 2)
              "
            >
              <el-input
                v-model="allform.setEmailBox"
                placeholder="请输入电子邮箱"
                style="width:250px"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="收货地址"
              v-if="invoiceStyle == 2 && invoiceHead == 2"
            >
              <div
                class="address_list_two"
                :style="{ height: addressHeight + 'px' }"
              >
                <div
                  :class="
                    index == selectIndexTwo
                      ? 'active1'
                      : 'address_list_item_two'
                  "
                  v-for="(item, index) in addressList"
                  :key="item.id"
                  @click="handlerSelectAddressTwo(item, index)"
                >
                  <div class="address_list_item_top">
                    {{ item.addressInfo }}({{ item.userName }})
                  </div>
                  <div class="address_list_item_center">
                    {{ item.addressDetail }}
                  </div>
                </div>
              </div>
              <div class="address_list_two_bottom">
                <el-link
                  type="primary"
                  :underline="false"
                  @click="handlershowMore"
                  >展开更多收货地址</el-link
                >
                <el-link
                  type="primary"
                  style="margin-right:40px"
                  :underline="false"
                  @click="handleraddressguanli"
                  >管理收货地址</el-link
                >
              </div>
            </el-form-item>
            <!-- <el-form-item label="备注">
              <el-input
                type="textarea"
                v-model="allform.desc"
                style="width:250px"
              ></el-input>
            </el-form-item> -->
          </div>
        </el-form>
      </div>

      <div class="address_price">
        <div class="address_price_inner">
          合计: ¥ <span style="font-size:28px">{{ goodtotal }}</span>
        </div>
      </div>
      <div class=" shop_car">
        <!-- 购物车icon -->
        <div class="shop_car_left">
          支付方式:
          <el-radio-group v-model="shoppay" @change="changeTheme">
            <el-radio class="radio" label="1">支付宝</el-radio>
            <el-radio class="radio" label="2">对公账户</el-radio>
          </el-radio-group>
        </div>
        <!-- 结算 -->
        <div class="shop_car_right">
          <div>
            合计:¥
            <b style="font-size:30px;margin-right:20px">{{ goodtotal }}</b>
          </div>
          <div @click="handlerOrder" class="shop_car_right_order">提交订单</div>
        </div>
      </div>

      <el-dialog
        :title="addressName == 'add' ? '新增收获地址' : '编辑收货地址'"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose1"
      >
        <el-form
          :model="addruleForm"
          :rules="addrules"
          ref="addruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="地址信息" prop="addressInfo">
            <el-input
              v-model="addruleForm.addressInfo"
              placeholder="请选择省市区街道"
            ></el-input>
          </el-form-item>
          <el-form-item label="详细地址" prop="addressDetail">
            <el-input
              v-model="addruleForm.addressDetail"
              placeholder="请输入详细地址"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮政编码" prop="postalCode">
            <el-input
              v-model="addruleForm.postalCode"
              placeholder="请输入邮政编码"
            ></el-input>
          </el-form-item>
          <el-form-item label="收货人姓名" prop="userName">
            <el-input
              v-model="addruleForm.userName"
              placeholder="请输入收货人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input
              v-model="addruleForm.phone"
              placeholder="请输入手机号"
            ></el-input>
          </el-form-item>
          <el-form-item prop="isDefault">
            <el-checkbox-group v-model="defaultaddress">
              <el-checkbox
                label="设为默认地址"
                name="type"
                @change="handlercheckDefault"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handlersubmit">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 管理地址 -->
      <el-dialog
        title="管理收货地址"
        :visible.sync="gaunlidialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <el-table :data="addressList" style="width: 100%">
          <el-table-column prop="userName" label="收货人" width="180">
          </el-table-column>
          <el-table-column prop="addressInfo" label="所在地区" width="180">
          </el-table-column>
          <el-table-column prop="addressDetail" label="详细地址">
          </el-table-column>
          <el-table-column prop="postalCode" label="邮编"> </el-table-column>
          <el-table-column prop="phone" label="电话/手机号"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scoped">
              <div>
                <el-link @click="handlershowEdit(scoped.row)">修改</el-link>
                <el-link @click="handlerDel(scoped.row.id)">删除</el-link>
                <el-link
                  v-if="scoped.row.isDefault == 2"
                  @click="handlersetIsDefault(scoped.row, 1)"
                  >设为默认</el-link
                >
                <el-link v-else @click="handlersetIsDefault(scoped.row, 2)"
                  >取消默认</el-link
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <span slot="footer" class="dialog-footer">
          <el-button @click="gaunlidialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  updatetDelAddr,
  insertDelAddr,
  getDelAddrList,
  deleteDelAddr,
  setIsDefault,
  getShoppingCar,
  submitOrder
} from "../../utils/api";
export default {
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      addressName: "add",
      addressList: [],
      addresscount: 0,
      defaultaddress: false,
      addruleForm: {
        addressInfo: "",
        addressDetail: "",
        postalCode: "",
        userName: "",
        phone: "",
        isDefault: 2,
        addressId: ""
      },
      addrules: {
        addressInfo: [
          { required: true, message: "请选择省市区街道", trigger: "blur" }
        ],
        addressDetail: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        userName: [
          { required: true, message: "请填写收货人姓名", trigger: "blur" }
        ],
        phone: [
          { required: true, message: "请填写收货人手机号", trigger: "blur" }
        ]
      },
      gaunlidialogVisible: false,
      goodlist: [],
      goodcount: 0,
      goodtotal: 0,
      allform: {
        carList: "",
        remark: "",
        payType: "",
        addressId: "",
        isApplyInv: 2,
        orderSn: "",
        invType: "1",
        vbrkType: "1",
        vbrk: "",
        remark: "",
        setEmailBox: "",
        setAddrInfo: "",
        setAddrDetail: "",
        setUserName: "",
        setPostalCode: "",
        setPhone: "",
        invKind: "1",
        taxpayerCode: "",
        bank: "",
        bankAccount: "",
        businessAddress: "",
        businessPhone: ""
      },
      openfa: false,
      selectIndex: 0,
      selectIndexTwo: 0,
      paylist: [
        {
          name: "支付宝",
          payType: 1
        },
        {
          name: "对公账户",
          payType: 2
        }
      ],
      shoppay: "1",
      showInvoice: false, //是否开具发票
      invoiceStyle: "1", //发票样式
      invoiceHead: "1", //抬头类型
      invoiceType: "1", //发票类型
      addressHeight: 0
    };
  },
  created() {
    this.handlergetDelAddrList();
    this.handlergetShoppingCar();
    // this.allform.carList
    this.allform.payType = Number(this.shoppay);
    this.addressHeight = 105;
  },
  methods: {
    //   返回上一级
    handlerback() {
      this.$router.push("/shop");
    },
    handleClose1() {
      this.dialogVisible = false;
      this.addruleForm.addressInfo = "";
      this.addruleForm.addressDetail = "";
      this.addruleForm.postalCode = "";
      this.addruleForm.userName = "";
      this.addruleForm.phone = "";
      this.addruleForm.isDefault = 2;
      this.addruleForm.addressId = "";
    },
    handleClose() {
      this.gaunlidialogVisible = false;
    },
    //获取收货地址
    handlergetDelAddrList() {
      const params = {
        pageNumber: 1,
        pageSize: 10
      };
      this.postRequest(getDelAddrList, params).then(res => {
        if (res.code == 200) {
          this.addressList = res.data.list;
          this.addresscount = res.data.count;
          if (this.addressList.length != 0) {
            this.allform.addressId = res.data.list[0].id;
            this.allform.setAddrInfo = res.data.list[0].addressInfo;
            this.allform.setAddrDetail = res.data.list[0].addressDetail;
            this.allform.setUserName = res.data.list[0].userName;
            this.allform.setPostalCode = res.data.list[0].postalCode;
            this.allform.setPhone = res.data.list[0].phone;
          }
        }
      });
    },
    // 点击设置为默认地址
    handlercheckDefault() {
      if (this.defaultaddress == true) {
        this.addruleForm.isDefault = 1;
      } else {
        this.addruleForm.isDefault = 2;
      }
    },
    // 点击显示收获地址
    handlershowaddress() {
      this.addressName = "add";

      this.dialogVisible = !this.dialogVisible;
    },
    // 点击显示编辑的收获地址
    handlershowEdit(row) {
      this.addressName = "edit";
      this.addruleForm.addressInfo = row.addressInfo;
      this.addruleForm.addressDetail = row.addressDetail;
      this.addruleForm.postalCode = row.postalCode;
      this.addruleForm.userName = row.userName;
      this.addruleForm.phone = row.phone;
      this.defaultaddress = row.isDefault == 1 ? true : false;
      this.addruleForm.addressId = row.id;
      this.dialogVisible = !this.dialogVisible;
    },
    // 新增收货地址
    handlerAddaddress() {
      this.postRequest(insertDelAddr, this.addruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("新增收获地址成功");
          this.dialogVisible = false;
          this.addruleForm.addressInfo = "";
          this.addruleForm.addressDetail = "";
          this.addruleForm.postalCode = "";
          this.addruleForm.userName = "";
          this.addruleForm.phone = "";
          this.addruleForm.isDefault = 2;
          this.addruleForm.addressId = "";
          this.handlergetDelAddrList();
        }
      });
    },
    // 编辑收获地址
    handlerEditaddress() {
      this.postRequest(updatetDelAddr, this.addruleForm).then(res => {
        if (res.code == 200) {
          this.$message.success("编辑收获地址成功");
          this.dialogVisible = false;
          this.handlergetDelAddrList();
        }
      });
    },

    //点击确定判断是新增地址还是编辑地址
    handlersubmit() {
      this.$refs.addruleForm.validate(valid => {
        if (!valid) return this.$message.error("请填写完整");
        if (this.addressName == "add") {
          this.handlerAddaddress();
        } else {
          this.handlerEditaddress();
        }
      });
    },
    // 点击删除收货地址
    handlerDel(id) {
      this.$confirm("您确定要删除当前收获地址吗, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.postRequest(deleteDelAddr, {
            addressId: id
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: "删除收获地址成功!"
              });
              this.handlergetDelAddrList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除收获地址"
          });
        });
    },
    // 设置为默认地址和非默认
    handlersetIsDefault(row, num) {
      this.$confirm(
        num == 1 ? "您是否设置当前地址为默认地址" : "您是否取消默认地址",
        "是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          this.postRequest(setIsDefault, {
            addressId: row.id,
            isDefault: num
          }).then(res => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: num == 1 ? "设为默认地址成功!" : "取消默认地址成功"
              });
              this.handlergetDelAddrList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: num == 1 ? "设为默认地址失败!" : "取消默认地址失败"
          });
        });
    },
    // 点击管理地址
    handleraddressguanli() {
      this.gaunlidialogVisible = !this.gaunlidialogVisible;
      this.handlergetDelAddrList();
    },
    // 获取订单信息
    handlergetShoppingCar() {
      this.postRequest(getShoppingCar, {
        pageNumber: 1,
        pageSize: 100
      }).then(res => {
        if (res.code == 200) {
          this.goodlist = res.data.list;
          this.goodcount = res.data.count;
          this.goodtotal = res.data.total;
          this.allform.carList = this.goodlist.map(item => {
            return item.id;
          });
        }
      });
    },

    // 选中地址
    handlerSelectAddress(row, index) {
      this.allform.addressId = row.id;
      this.selectIndex = index;
    },
    // 点击开启发票中------点击选择地址
    handlerSelectAddressTwo(row, index) {
      this.allform.setAddrInfo = row.addressInfo;
      this.allform.setAddrDetail = row.addressDetail;
      this.allform.setUserName = row.userName;
      this.allform.setPostalCode = row.postalCode;
      this.allform.setPhone = row.phone;
      this.selectIndexTwo = index;
    },
    changeTheme(val) {
      this.allform.payType = Number(val);
    },
    //提交订单
    handlerOrder() {
      this.allform.carList = JSON.stringify(this.allform.carList);
      this.postRequest(submitOrder, this.allform).then(res => {
        if (res.code == 200) {
          this.$message.success("提交订单成功");
          this.$router.push("/shop");
        }
      });
    },
    // 是否发具发票
    handleropen() {
      if (this.openfa == false) {
        this.allform.isApplyInv = 2;
        this.showInvoice = false;
      } else {
        this.allform.isApplyInv = 1;
        this.showInvoice = true;
      }
    },
    // 点击发票样式
    handlerinvoiceStyle(val) {
      this.invoiceStyle = val;
      this.allform.invType = this.invoiceStyle;
    },
    // 点击抬头类型
    handlerinvoiceHead(val) {
      this.invoiceHead = val;
      this.allform.vbrkType = this.invoiceHead;
    },
    // 点击发票类型
    hadnlerinvoiceType(val) {
      this.invoiceType = val;
      this.allform.invKind = this.invoiceType;
    },
    // 点击展开更多收货地址
    handlershowMore() {
      if (this.addressHeight == 105) {
        this.addressHeight =
          this.addressHeight * Number(this.addresscount) + 30;
      } else {
        this.addressHeight = 105;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.address {
  .product {
    display: flex;
    flex-direction: row;
    .product_left {
      width: 60px;
      height: 60px;
      margin: 0 30px;
    }
    .product_right {
      font-size: 12px;
    }
  }
  .address_select {
    margin: 25px 0;
  }
  .address_list {
    margin: 25px 0;
    display: flex;
    flex-direction: row;
    .address_list_item {
      width: 370px;
      height: 135px;
      cursor: pointer;
      //   border: 1px solid #0469ff;
      border: 1px solid #cccccc;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: #000000;
      font-weight: 400;
      margin-left: 10px;
      .address_list_item_top {
        height: 50px;
        width: 330px;
        line-height: 50px;
        margin-left: 20px;
        border-bottom: 1px solid #d9d9d9;
      }
      .address_list_item_center {
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
      }
      .address_list_item_bottom {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        span {
          margin-right: 40px;
          color: #0469ff;
        }
      }
    }
    .address_list_add {
      width: 138px;
      height: 135px;
      border: 1px solid rgba(0, 0, 0, 0.14901960784313725);
      border-radius: 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      line-height: 40px;
      margin-left: 50px;
      font-size: 14px;
      cursor: pointer;
    }
  }

  .address_list_two {
    margin: 25px 0 0px 0;
    width: 400px;

    display: flex;
    flex-direction: column;
    overflow: hidden;
    .address_list_item_two {
      width: 370px;
      height: 105px;
      cursor: pointer;
      //   border: 1px solid #0469ff;
      border: 1px solid #cccccc;
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      font-size: 14px;
      color: #000000;
      font-weight: 400;
      margin-left: 10px;
      margin-bottom: 10px;
      .address_list_item_top {
        height: 50px;
        width: 330px;
        line-height: 50px;
        margin-left: 20px;
        border-bottom: 1px solid #d9d9d9;
      }
      .address_list_item_center {
        height: 50px;
        line-height: 50px;
        margin-left: 20px;
      }
      .address_list_item_bottom {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        span {
          margin-right: 40px;
          color: #0469ff;
        }
      }
    }
  }
  .address_list_two_bottom {
    width: 370px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-left: 15px;
  }
  .address_order {
    margin: 30px 0;
  }
  .address_mark {
    margin: 30px 0;
  }
  .address_isopen {
    margin: 30px 0;
  }
  .address_price {
    margin-top: 30px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    border-bottom: 1px solid #d9d9d9;
    .address_price_inner {
      margin-right: 60px;
      padding-bottom: 10px;
    }
  }
  .select_address {
  }
  .shop_car {
    margin-top: 40px;
    position: relative;
    bottom: 0;
    width: 95%;
    height: 70px;
    background: #f2f5fc;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .shop_car_left {
      line-height: 70px;
      margin-left: 10px;
    }
    .shop_car_right {
      display: flex;
      flex-direction: row;
      line-height: 70px;
      .shop_car_right_order {
        width: 181px;
        height: 70px;
        background: #004cff;
        opacity: 1;
        text-align: center;
        line-height: 70px;
        color: #ffffff;
        cursor: pointer;
      }
    }
  }
  .active {
    width: 370px;
    height: 135px;
    cursor: pointer;
    border: 1px solid #0469ff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    margin-left: 10px;
    .address_list_item_top {
      height: 50px;
      width: 330px;
      line-height: 50px;
      margin-left: 20px;
      border-bottom: 1px solid #d9d9d9;
    }
    .address_list_item_center {
      height: 50px;
      line-height: 50px;
      margin-left: 20px;
    }
    .address_list_item_bottom {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      span {
        margin-right: 40px;
        color: #0469ff;
      }
    }
  }
  .active1 {
    width: 370px;
    height: 105px;
    cursor: pointer;
    border: 1px solid #0469ff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    color: #000000;
    font-weight: 400;
    margin-left: 10px;
    margin-bottom: 10px;
    .address_list_item_top {
      height: 50px;
      width: 330px;
      line-height: 50px;
      margin-left: 20px;
      border-bottom: 1px solid #d9d9d9;
    }
    .address_list_item_center {
      height: 50px;
      line-height: 50px;
      margin-left: 20px;
    }
    .address_list_item_bottom {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      span {
        margin-right: 40px;
        color: #0469ff;
      }
    }
  }
}
</style>
